<template>
  <div id="article">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>文章管理</span>
      </div>
      <el-form inline ref="form" :model="form" label-width="80px">
        <el-form-item label="关键字">
          <el-input @clear="cleartable($event, 'clear')" clearable style="width: 250px;" v-model="field" size="small"
            placeholder="请输入标题或简介"></el-input>
        </el-form-item>
        <el-form-item label-width="0px">
          <el-button type="primary" size="small" @click="search" icon="el-icon-search">搜索</el-button>
          <el-button type="info" size="small" @click="cleartable($event)" icon="el-icon-search">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="5">
        <el-col :span="1.5">
          <el-button @click="addorset()" plain type="primary" size="small" icon="el-icon-search">增加</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="addorset(checkboxall[0].article_id)" :disabled="checkboxall.length != 1" plain type="success"
            size="small" icon="el-icon-search">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="delArticle()" :disabled="checkboxall.length == 0" plain type="danger" size="small"
            icon="el-icon-search">删除</el-button>
        </el-col>
      </el-row>
      <!-- 
        分类
        标题
        简介
        时间
        生活
        操作

       -->
      <el-table @selection-change="handleSelectionChange" height="70%" :data="tableData"
        style="width: 100%;margin: 30px 0;">
        <el-table-column align="center" type="selection">
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="classname" label="分类">
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="title" label="标题">
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="intro" label="简介">
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <el-switch :active-value="0" :inactive-value="1" @change="switch_value(scope.row)"
              v-model="scope.row.is_delete">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="date" label="时间">
          <template slot-scope="scope">
            {{ scope.row.date ? $moment(scope.row.date) : '' }}
          </template>
        </el-table-column>
        <el-table-column :width="200" align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="addorset(scope.row.article_id)" size="small" type="primary"
              icon="el-icon-edit">修改</el-button>
            <el-button @click="delArticle(scope.row.article_id)" size="small" type="danger"
              icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: center; margin-top: 20px;" @size-change="sizeChange"
        @current-change="currentChange" :current-page="pagination.pagenum" :page-sizes="pagination.pageSizes"
        :page-size="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { setArticle, getArticle, delArticle } from '@/api/index'
export default {
  data() {
    return {
      tableData: [],
      pagination: {
        pageSizes: [2, 4, 6, 8, 10],
        pagesize: 2,
        pagenum: 1,
        total: 0,
      },
      checkboxall: [],
      form: {},
      field: ''
    }
  },
  mounted() {
    this.get_article()
  },
  methods: {
    //获取文章信息
    get_article() {
      let pagination = { ...this.pagination }
      delete pagination.pageSizes
      delete pagination.total
      pagination.field = this.field
      pagination.type = 1
      getArticle(pagination).then(res => {
        this.tableData = res.data.results
        this.pagination.total = res.data.total
      })
    },
    //开关回调
    switch_value(row) {
      //通过id修改状态
      let data = {
        article_id: row.article_id,
        is_delete: row.is_delete
      }
      setArticle(data).then((res) => {
        if (!res.data.status) {
          this.$message.error(res.data.message);
          row.is_delete = !row.is_delete
        }
      })
    },
    //选中回调
    handleSelectionChange(val) {
      this.checkboxall = val;
    },
    //删除
    delclass(id) {
      let data = this.checkboxall.map((item, index) => {
        return item.class_id
      })
      delclass({ list: id ? [id] : data }).then((res) => {
        if (!res.data.status) {
          this.$message.success("成功");
          this.getclassarticle();
        } else {
          this.$message.error("失败")
        }
      })
    },
    //修改pagesize
    sizeChange(e) {
      this.pagination.pagesize = e;
      this.get_article()
    },
    //修改pagenum
    currentChange(e) {
      this.pagination.pagenum = e;
      this.get_article()
    },
    //重置
    cleartable() {
      this.pagination.pagenum = 1;
      this.field = ''
      this.get_article();
    },
    //搜索
    search() {
      this.pagination.pagenum = 1;
      this.get_article()
    },
    //多选删除/删除
    delArticle(article_id) {
      console.log(article_id);

      if (article_id === undefined) {
        //多选模式
        let delmsg = this.checkboxall.map((item, index) => {
          return item.article_id;
        });
        console.log(delmsg);
        delArticle({ list: delmsg }).then((res) => {
          if (res.data.status) {
            this.$message.success(res.data.message)
            this.cleartable();
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        //单选模式
        delArticle({ list: [article_id] }).then((res) => {
          if (res.data.status) {
            this.$message.success(res.data.message)
            this.cleartable();
          } else {
            this.$message.error(res.data.message)
          }
        })
      }

    },
    //增加或修改
    addorset(article_id) {
      if (article_id !== undefined) {
        //修改模式
        this.$router.push({ path: 'send', query: { article_id: article_id } })
      } else {
        //增加模式
        this.$router.push({ path: 'send' })
      }
    }
  }
}
</script>

<style lang="less" src="./index.less" scoped></style>